<template>
    <view class="container">
        <!-- 状态栏占位 -->
        <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
        <view class="profile-container">
            <!-- 用户信息区域 -->
            <view class="user-info">
                <image class="background-image" :src="public_img + '/img/minebg.jpg'" mode="aspectFill"></image>
                <view class="user-info-content">
                    <image class="avatar" :src="userData.avatar || public_img + '/img/my.png'" mode="aspectFill"
                        @error="handleAvatarError"></image>
                    <view class="user-details">
                        <view class="username-row">
                            <text class="username">{{ userData.nickname || "未登录" }}</text>
                            <text class="user-score">
                                <image :src="public_img + '/img/img17410018acb75e5c0.png'" mode="scaleToFill" />
                                当前积分：{{ userData.score ?? 0 }}
                            </text>
                            <uni-icons class="arrow-icon" type="arrowright" size="14" color="#546AAC"></uni-icons>
                        </view>
                        <text class="user-intr">{{ userData.intr || "暂无个人简介" }}</text>
                    </view>
                </view>

                <view class="settings-icon" @click="goToSettings">
                    <uni-icons type="gear" size="24" color="black"></uni-icons>
                </view>
            </view>

            <view class="user-info-actions">
                <view class="stats-container">
                    <view class="stat-item" @click="goToCollectList">
                        <text class="stat-number">{{ userData.starCount || 0 }}</text>
                        <text class="stat-label">商品收藏</text>
                    </view>
                    <view class="divider"></view>
                    <view class="stat-item" @click="goToFootprint">
                        <text class="stat-number">{{ userData.spoorCount || 0 }}</text>
                        <text class="stat-label">浏览足迹</text>
                    </view>
                    <view class="divider"></view>
                    <view class="stat-item">
                        <text class="stat-number">{{ userData.couponCount || 0 }}</text>
                        <text class="stat-label">优惠券</text>
                    </view>
                </view>
            </view>

            <!-- 新增功能行 -->
            <view class="new-functions">
                <view class="function-block">
                    <view class="function-icon score-icon">
                        <image :src="public_img + '/img/img17374918acb4851c8.png'" mode="scaleToFill" />
                    </view>
                    <text class="function-text">积分管理</text>
                </view>

                <view class="function-block">
                    <view class="function-icon cache-icon">
                        <image :src="public_img + '/img/img17375218acb487108.png'" mode="scaleToFill" />
                    </view>
                    <text class="function-text">优惠券</text>
                </view>

                <view class="function-block" @click="goToAddress">
                    <view class="function-icon address-icon">
                        <image :src="public_img + '/img/img17375518acb48b758.png'" mode="scaleToFill" />
                    </view>
                    <text class="function-text">收货地址</text>
                </view>

                <view class="function-block">
                    <view class="function-icon clockin-icon">
                        <image :src="public_img + '/img/img17436218acb9f3fb0.png'" mode="scaleToFill" />
                    </view>
                    <text class="function-text">打卡</text>
                </view>

                <view class="function-block">
                    <view class="function-icon student-icon">
                        <image :src="public_img + '/img/img17375718acb48f5d8.png'" mode="scaleToFill" />
                    </view>
                    <text class="function-text">学员管理</text>
                </view>
            </view>

            <!-- 订单状态 -->
            <view class="section-title" style="justify-content: space-between; margin-top: 40px">
                <text>我的订单</text>
                <view class="more-orders" @click="goToAllOrders">
                    <text>查看全部订单</text>
                    <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
                </view>
            </view>

            <view class="order-status" @click="goToAllOrders">
                <view class="status-item" @click.stop="goToOrders(1)">
                    <image :src="public_img + '/img/img17400418acb6a06b0.png'" mode="scaleToFill" />
                    <text class="status-text">待付款</text>
                </view>
                <view class="status-item" @click.stop="goToOrders(2)">
                    <image :src="public_img + '/img/img17400718acb6a3d60.png'" mode="scaleToFill" />
                    <text class="status-text">待发货</text>
                </view>
                <view class="status-item" @click.stop="goToOrders(3)">
                    <image :src="public_img + '/img/img17401018acb6a6c40.png'" mode="scaleToFill" />
                    <text class="status-text">待收货</text>
                </view>
                <view class="status-item" @click.stop="goToOrders(4)">
                    <image :src="public_img + '/img/img17401118acb6a9738.png'" mode="scaleToFill" />
                    <text class="status-text">待评价</text>
                </view>
            </view>

            <!-- 活动 -->
            <view class="action">
                <image :src="public_img + '/img/action.png'" mode="scaleToFill" />
            </view>

            <!-- 猜你喜欢 -->
            <view class="section-title" style="background-color: inherit">
                <image :src="public_img + '/img/img17184318ac6cab8e8.png'" mode="scaleToFill" />
                <text>猜你喜欢</text>
            </view>

            <!-- 瀑布流商品列表 -->
            <view class="waterfall-container">
                <view class="waterfall-column" v-for="(column, colIndex) in waterfallColumns" :key="colIndex">
                    <view class="product-item-waterfall" v-for="(item, index) in column" :key="index"
                        @click="goToProductDetail(item)">
                        <image :src="item.img" mode="widthFix"></image>
                        <view class="product-info-waterfall">
                            <view class="product-title">{{ item.title }}</view>
                            <view class="product-synopsis">{{ item.synopsis }}</view>
                            <view class="product-price">
                                <text class="price">¥{{ item.price }}</text>
                                <text class="original-price">¥{{ item.original_price }}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 无数据提示 -->
            <view v-if="!productList.length && !loading" class="no-data">
                <text>暂无推荐商品</text>
            </view>
        </view>
    </view>
</template>
<script>
import { public_img } from '@/static/public.js';
import { userApi, homeApi } from '@/api/indexAPI.js';

export default {
    data() {
        return {
            public_img: public_img,
            statusBarHeight: 0, // 状态栏高度
            userData: {
                avatar: '',
                nickname: '',
                intr: null,
                score: 0,
                starCount: 0,
                spoorCount: 0,
                couponCount: 0,
                gender: '',
                birthday: '',
                audits: '',
                username: '',
                role: 0
            },
            // 商品列表数据
            productList: [],
            // 瀑布流列数
            waterfallColumnCount: 2,
            // 瀑布流列数据
            waterfallColumns: [[], []],
            loading: false
        }
    },
    onLoad() {
        // 获取状态栏高度
        this.getStatusBarHeight();
        this.loadUserData();
        // 加载推荐商品列表
        this.loadRecommendList();
    },
    onShow() {
        // 每次显示页面时刷新用户数据
        this.loadUserData();
    },
    methods: {
        // 获取状态栏高度
        getStatusBarHeight() {
            try {
                const systemInfo = uni.getSystemInfoSync();
                this.statusBarHeight = systemInfo.statusBarHeight || 0;
            } catch (err) {
                console.error('获取状态栏高度失败', err);
                this.statusBarHeight = 20;
            }
        },
        // 加载用户数据
        async loadUserData() {
            try {
                const response = await userApi.getUserCenter();
                if (response && (response.code === 1 || response.code === 200) && response.data) {
                    this.userData = {
                        ...this.userData,
                        ...response.data
                    };
                } else {
                    console.error('获取用户信息失败:', response);
                }
            } catch (error) {
                console.error('获取用户信息出错:', error);
            }
        },
        // 处理头像加载错误
        handleAvatarError() {
            // 头像加载失败时使用默认头像
            this.userData.avatar = this.public_img + '/img/my.png';
        },
        // 跳转到全部订单
        goToAllOrders() {
            uni.navigateTo({
                url: '/pages/check/index?status=all'
            });
        },
        // 跳转到订单页并选中指定状态
        goToOrders(status) {
            const key = status == null ? 'all' : String(status);
            uni.navigateTo({
                url: `/pages/check/index?status=${key}`
            });
        },
        // 加载推荐商品列表
        async loadRecommendList() {
            this.loading = true;
            try {
                const res = await homeApi.getHomeData();
                if (res && res.code === 1 && res.data) {
                    // 设置商品列表数据
                    if (res.data.list && Array.isArray(res.data.list) && res.data.list.length > 0) {
                        this.productList = res.data.list.map(item => ({
                            ...item,
                            img: item.img && item.img.startsWith('http') ? item.img : (public_img + (item.img || ''))
                        }));
                        // 构建瀑布流数据
                        this.buildWaterfallData();
                    } else {
                        // 如果没有商品数据，设置为空数组
                        this.productList = [];
                        this.waterfallColumns = [[], []];
                    }
                } else {
                    console.error('获取推荐商品失败:', res);
                    this.productList = [];
                    this.waterfallColumns = [[], []];
                }
            } catch (error) {
                console.error('获取推荐商品出错:', error);
                this.productList = [];
                this.waterfallColumns = [[], []];
            } finally {
                this.loading = false;
            }
        },
        // 构建瀑布流数据
        buildWaterfallData() {
            // 初始化列数组
            const columns = Array.from({ length: this.waterfallColumnCount }, () => []);

            // 将商品列表按顺序分配到各列
            this.productList.forEach((item, index) => {
                const columnIndex = index % this.waterfallColumnCount;
                columns[columnIndex].push(item);
            });

            // 更新瀑布流列数据
            this.waterfallColumns = columns;
        },
        // 跳转到商品详情
        goToProductDetail(item) {
            uni.navigateTo({
                url: `/pages/product/index?id=${item.id}`
            });
        },
        // 跳转到设置页面
        goToSettings() {
            uni.navigateTo({
                url: '/pages/mine/setting'
            });
        },
        // 跳转到收藏列表页面
        goToCollectList() {
            uni.navigateTo({
                url: '/pages/mine/mystar'
            });
        },
        // 跳转到足迹页面
        goToFootprint() {
            uni.navigateTo({
                url: '/pages/mine/footprint'
            });
        },
        // 跳转到收货地址页面
        goToAddress() {
            uni.navigateTo({
                url: '/pages/location/index'
            });
        }
    }
}
</script>
<style scoped>
.container {
    width: 100%;
    min-height: 100vh;
    background-color: #f5f5f5;
}

/* 状态栏占位 */
.status-bar {
    width: 100%;
    background-color: transparent;
}

.profile-container {
    padding-bottom: 20rpx;
}

.user-info {
    display: flex;
    height: 230px;
    flex-direction: row;
    align-items: center;
    color: #545454;
    position: relative;
    overflow: hidden;
}

.background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.user-info-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    padding-left: 30rpx;
    position: absolute;
    top: 1.875rem;
    z-index: 2;
}

.avatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    border: 4rpx solid rgba(255, 255, 255, 0.3);
    margin-right: 20rpx;
}

.user-details {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.username-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 10rpx;
}

.username {
    font-size: 36rpx;
    font-weight: bold;
    margin-right: 10rpx;
}

.user-score {
    font-size: 24rpx;
    padding: 4rpx 10rpx;
    border-radius: 6rpx;
    margin-right: 10rpx;
}

.user-score image {
    width: 20rpx;
    height: 20rpx;
}

.arrow-icon {
    align-self: center;
}

.user-intr {
    font-size: 24rpx;
    opacity: 0.9;
}

.settings-icon {
    position: absolute;
    top: 90rpx;
    right: 30rpx;
    z-index: 2;
}

.new-functions {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 30rpx 0;
    position: absolute;
    width: 100%;
    top: 28%;
}

.function-block {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.function-icon {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10rpx;
}

.function-icon image {
    width: 60rpx;
    height: 60rpx;
}

.function-text {
    font-size: 14px;
    color: #666;
}

.section-title {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20rpx 30rpx 10rpx;
    font-size: 15px;
    font-weight: 350;
    color: #333;
    background-color: white;
}

.section-title image {
    width: 19px;
    height: 19px;
    margin-right: 5px;
}

.more-orders {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 24rpx;
    font-weight: normal;
    color: #999;
}

.order-status {
    display: flex;
    flex-direction: row;
    background-color: #fff;
    padding: 30rpx 0;
    margin-bottom: 20rpx;
}

.status-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 25%;
}

.status-item image {
    width: 35px;
    height: 35px;
}

.status-text {
    font-size: 14px;
    color: #666;
    margin-top: 10rpx;
}

.user-info-actions {
    display: flex;
    justify-content: center;
    width: 100%;
    z-index: 2;
    position: absolute;
    top: 20%;
}

.stats-container {
    display: flex;
    flex-direction: row;
    border-radius: 16rpx;
    padding: 20rpx 0;
    width: 90%;
    justify-content: space-between;
    align-items: center;
}

.stat-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.stat-number {
    font-size: 32rpx;
    color: #000000;
    margin-bottom: 8rpx;
}

.stat-label {
    font-size: 15px;
    color: #000000;
}

.divider {
    width: 2rpx;
    height: 60rpx;
    background-color: #666;
}

/* 活动 */
.action {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    margin-top: 3%;
}

.action image {
    width: 100%;
    height: 150px;
}

/* 瀑布流容器 */
.waterfall-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 20rpx 20rpx;
}

.waterfall-column {
    display: flex;
    flex: 1;
    flex-direction: column;
    margin-right: 15rpx;
}

.waterfall-column:last-child {
    margin-right: 0;
}

.product-item-waterfall {
    background-color: #fff;
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
    margin-bottom: 7px;
    padding: 5px;
}

.product-item-waterfall image {
    width: 100%;
    border-radius: 5.5px;
}

.product-info-waterfall {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.product-title {
    font-size: 14px;
    color: #505050;
    margin-bottom: 3px;
}

.product-synopsis {
    font-size: 13px;
    color: #8b8b8c;
    margin-bottom: 10px;
    flex: 1;
    width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-price {
    display: flex;
    align-items: center;
}

.price {
    font-size: 14px;
    color: #ff4757;
    margin-right: 10rpx;
}

.original-price {
    font-size: 24rpx;
    color: #999;
    text-decoration: line-through;
}

/* 无数据提示 */
.no-data {
    width: 100%;
    text-align: center;
    padding: 40rpx 0;
    color: #999;
    font-size: 28rpx;
}
</style>